<template>
  <view class=" ">
    <tn-nav-bar fixed alpha :isBack="true" fontColor="#ffffff">
      秘密树洞
    </tn-nav-bar>
    <image
      mode="widthFix"
      style="
        width: 194rpx;
        position: fixed;
        z-index: 3;
        top: 202rpx;
        left: 450rpx;
      "
      src="../../static/other/bubble.png"
    >
    </image>

    <image
      mode="widthFix"
      style="
        width: 194rpx;
        bottom: 620rpx;
        position: fixed;
        z-index: 3;
        right: 76rpx;
      "
      src="../../static/other/bubble.png"
    >
    </image>

    <image
      mode="widthFix"
      style="
        width: 194rpx;
        top: 454rpx;
        position: fixed;
        z-index: 3;
        left: 128rpx;
      "
      src="../../static/other/bubble.png"
    >
    </image>

    <view class="hex-border">
      <view class="box">
        <image
          :animation="baoxiangmone"
          mode="widthFix"
          style="width: 250rpx"
          src="../../static/other/bubble.png"
          v-if="showdonghua"
        >
        </image>
        <image
          :animation="baoxiangmone"
          mode="widthFix"
          style="width: 250rpx"
          src="../../static/other/bubble.png"
          v-if="showdonghuadakai"
        >
        </image>
      </view>
    </view>

    <tn-modal
      width="95%"
      v-model="zhitiaoshow"
      backgroundColor="#ffffff"
      padding="30rpx 20rpx"
      :radius="25"
      title="设置"
      :showCloseBtn="true"
      @cancel="cancel"
      :maskCloseable="true"
      :zoom="true"
      :zIndex="20078"
      :custom="true"
    >
      <view class="nav-list" v-if="item">
        <view class="nav-list-item tn-padding tn-shadow-blur">
          <view class="article-shadow">
            <view class="tn-flex">
              <view class="image-pic tn-margin-sm">
                <tn-avatar :src="item.avatar" size="lg"></tn-avatar>
              </view>
              <view class="tn-margin-sm tn-padding-top-xs" style="width: 100%">
                <view class="tn-flex tn-flex-row-between">
                  <view
                    class="justify-content-item tn-text-bold tn-text-center tn-color-bule tn-text-lg"
                  >
                    {{ item.nickname }}
                  </view>
                </view>
                <view class="tn-flex tn-flex-row-between tn-flex-col-between">
                  <view
                    class="justify-content-item tn-text-center tn-color-gray"
                    style="padding-top: 5rpx; font-size: 12px"
                  >
                    <text
                      class="tn-padding-right tn-text-df tn-icon-location-fill"
                      >{{ item.city }}</text
                    >
                    <text v-if="item.shengri.age">
                      {{ item.shengri.age }}/{{ item.shengri.animals }}/{{
                        item.shengri.constellation
                      }}
                    </text>
                  </view>
                </view>
              </view>
            </view>
          </view>

          <view class="tn-padding-top-xs">
            <view class="tn-padding-top-xs tn-padding-sm">
              <image :src="item.images" mode="aspectFill" style="width: 100%">
              </image>
            </view>

            <view class="tn-padding-top-xs tn-padding-sm">
              <view
                class="tn-text-df tn-color-black tn-text-ellipsis-2 tn-text-justify"
              >
                微信号： {{ item.dec }}
                <tn-tag
                  backgroundColor="#1DC069"
                  fontColor="#ffffff"
                  @click="fuzhi(item.dec)"
                  width="80rpx"
                  shape="radius"
                  >复制</tn-tag
                >
              </view>
            </view>
            <view class="tn-padding-top-xs tn-padding-sm">
              <text
                class="tn-text-df tn-color-black tn-text-ellipsis-2 tn-text-justify"
              >
                加我备注： {{ item.tag }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </tn-modal>

    <tn-popup
      v-model="goumaishow"
      width="80%"
      :height="gaodu"
      mode="bottom"
      backgroundColor="#1b163f"
      :borderRadius="30"
      :mask="false"
      :closeBtn="false"
      :maskCloseable="false"
    >
      <view class="tn-flex tn-flex-row-left" style="margin: 40rpx">
        <view class="tn-text-bold tn-color-white" style="font-size: 28rpx"
          >匹配性别:
          <view style="margin-top: 28rpx">
            <!--         :backgroundColor="
                sex == 1 ? 'tn-main-gradient-purple--reverse' : '#78909C'
              " -->
            <tn-button
              width="140rpx"
              height="60rpx"
              fontColor="#fff"
              shape="round"
              fontSize="36rpx"
              fontBold
              :style="{
                marginRight: '20rpx',
                marginLeft: '4rpx',
                background:
                  sex == 1
                    ? 'linear-gradient(270deg, #189eff 0%, #06ffaa 100%)'
                    : '#767676',
                padding: '8rpx 20rpx',
              }"
              @click="sex = 1"
            >
              <img
                src="../../static/other/manicon.png"
                style="margin-right: 20rpx; width: 100%; height: 100%"
                alt=""
              />
              男
            </tn-button>
            <tn-button
              @click="sex = 2"
              width="140rpx"
              height="60rpx"
              shape="round"
              fontColor="#ffffff"
              fontSize="36rpx"
              fontBold
              :style="{
                background:
                  sex == 2
                    ? 'linear-gradient(270deg, #FF6CCE 0%, #F9A1BA 100%)'
                    : '#767676',
                padding: '8rpx 20rpx',
              }"
            >
              <img
                src="../../static/other/womanicon.png"
                style="margin-right: 20rpx; width: 100%; height: 100%"
                alt=""
              />
              女
            </tn-button>
          </view>
        </view>
      </view>
      <view class="tn-flex tn-flex-wrap" style="margin: 0 40rpx">
        <view
          class="tn-flex-basic-xs justify-content-item tn-text-center"
          @click="qiehuan(0)"
        >
          <tn-button
            fontColor="#ffffff"
            padding="0 14rpx"
            width="240rpx"
            height="136rpx"
            :fontSize="38"
            fontBold
            style="
              display: block;
              background: linear-gradient(270deg, #ff6cce 0%, #f9a1ba 100%);
              display: flex;
              align-items: center;
            "
          >
            <img
              style="width: 76rpx; height: 76rpx"
              src="../../static/other/listenicon.png"
              alt=""
            />
            <view>
              <view class="tn-flex tn-text-bold" style="font-size: 28rpx"
                >听一次</view
              >
              <view
                style="
                  width: 100%;
                  font-size: 20rpx;
                  margin-top: 16rpx;
                  color: #d8d8d8;
                  flex-shrink: 0;
                "
                >可用次数{{ peizhi.sheng_num }}次</view
              >
            </view>
          </tn-button>
        </view>
        <view
          class="tn-flex-basic-xs justify-content-item tn-text-center"
          @click="
            navigateToFn({
              url: '/friendMixinPages/loveping/add',
              checkLogin: true,
            })
          "
        >
          <tn-button
            fontColor="#ffffff"
            padding="0 14rpx"
            width="240rpx"
            height="136rpx"
            fontBold
            style="
              display: block;
              margin: 0 20rpx;
              background: linear-gradient(0deg, #895afe 0%, #fa87c2 100%);
              display: flex;
              align-items: center;
            "
          >
            <img
              style="width: 76rpx; height: 76rpx; margin-right: 8rpx"
              src="../../static/other/sayicon.png"
              alt=""
            />
            <view>
              <view class="tn-flex tn-text-bold" style="font-size: 28rpx"
                >说一个</view
              >
              <view
                style="
                  width: 100%;
                  font-size: 20rpx;
                  margin-top: 16rpx;
                  color: #d8d8d8;
                  flex-shrink: 0;
                "
                >介绍你自己</view
              >
            </view>
          </tn-button>
        </view>

        <view
          class="tn-flex-basic-xs justify-content-item tn-text-center"
          @click="
            navigateToFn({
              url: '/friendMixinPages/loveping/look',
              checkLogin: true,
            })
          "
        >
          <tn-button
            fontColor="#ffffff"
            width="150rpx"
            height="136rpx"
            fontBold
            style="
              display: block;
              background: linear-gradient(270deg, #66e0ff 0%, #6ef0da 100%);
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
            "
          >
            <img
              style="width: 60rpx"
              src="../../static/other/LookBackicon.png"
              alt=""
            />
            <view style="margin-top: 4rpx; font-size: 36rpx">回看</view>
          </tn-button>
        </view>
      </view>

      <view>
        <view style="margin: 40rpx">
          <view class="tn-flex-row-left">
            <!-- 消耗{{ peizhi.jiage
              }}{{ configInfo.site_moneyname }}获得1次机会 -->
            <view class="tn-flex tn-flex-col-bottom" style="color: #ffffff">
              <view
                style="
                  font-family: Source Han Sans;
                  font-weight: 500;
                  font-size: 28rpx;
                "
                >购买听一次的机会</view
              ><view
                style="
                  font-family: Source Han Sans;
                  font-weight: 500;
                  font-size: 20rpx;
                "
                >（20金币/次）</view
              >
            </view>
          </view>
        </view>
        <view class="tn-flex tn-flex-row-between" style="margin: 0 40rpx">
          <!-- <tn-number-box
            v-model="num"
            :min="1"
            :longPress="false"
            @change="change"
            :step="1"
            backgroundColor="rgb(27, 22, 63)"
            fontSize="36rpx"
          >
          </tn-number-box> -->
          <view class="numberBox tn-flex tn-flex-center">
            <view class="reduce" @click="reduce(0)"
              ><text class="tn-icon-reduce"></text
            ></view>
            <view class="number">{{ num }}</view>
            <view class="add" @click="reduce(1)"
              ><text class="tn-icon-add"></text
            ></view>
          </view>
          <view>
            <text
              class="tn-text-bold"
              style="
                background: linear-gradient(180deg, #fa5151 0%, #ffc300 100%);
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-clip: text;
                text-fill-color: transparent;
                font-size: 28rpx;
                margin-right: 40rpx;
              "
              >{{ peizhi.jiage * num }}金币</text
            >
            <!-- {{ configInfo.site_moneyname }} -->
            <tn-tag
              @click="buynum()"
              width="252rpx"
              height="78rpx"
              padding="0"
              shape="circle"
              fontColor="#ffffff"
              :plain="false"
              style="
                background: linear-gradient(180deg, #fa5151 0%, #ffc300 100%);
                font-size: 28rpx;
              "
            >
              <text>立即购买</text>
            </tn-tag>
          </view>
        </view>
      </view>
    </tn-popup>
  </view>
</template>

<script>
const audioContext = uni.createInnerAudioContext();
const audioContextd = uni.createInnerAudioContext();
import { host } from "@/siteinfo.js";
import template_page_mixin from "@/libs/mixin/template_page_mixin.js";
import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue";
import MescrollUni from "@/components/mescroll-uni/mescroll-uni.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
export default {
  name: "TemplateGroup",
  mixins: [template_page_mixin, MescrollMixin],
  components: {
    MescrollBody,
  },
  data() {
    return {
      school_id: 0,
      sex: 1,
      school_title: "",
      animation: {},
      mylist: [],
      num: 1,
      gaodu: "584rpx",
      showmy: false,
      huiyingbody: "",
      showdonghuadakai: false,
      showdonghua: false,
      flyxin: host + "/api/images/ping.png",
      zhitiaoshow: false,
      item: {
        shengri: [],
      },
      goumaishow: true,
      flyimg: host + "/api/images/fly.png",
      maicishushow: false,
      zishu: 0,
      zishu_hui: 0,
      tiezi_zishu: 140,
      bgimg: host + "/api/images/piao.jpg",
      biaoqian: "",
      xuanyan: "",
      qiangshow: false,
      bg: "tn-main-gradient-blue--light",
      bg: "tn-main-gradient-blue--light",
      id: 0,
      type: 0,
      content: [],
      managelist: [],
      peizhi: [],
    };
  },
  onLoad(option) {
    if (option.id) {
      this.id = option.id;
    }
    this.info();
    this.donghua_moren();
    uni.$off("love_index_school");
    uni.$on("love_index_school", (res) => {
      this.school_title = res.title;
      this.school_id = res.id;
    });
  },

  onUnload() {
    audioContext.stop();
  },
  methods: {
    reduce(index) {
      if (index == 0 && this.num >= 2) {
        this.num--;
      } else if (index == 1) {
        this.num++;
      }
    },
    cancel() {
      console.log(33);
      this.zhitiaoshow = false;
      this.gaodu = "584rpx";
    },
    touchStart(event) {
      // 获取初始时间
      this.startTime = Date.now();
      // 获取初始的位置
      this.startPosition = event.changedTouches[0].clientY;
    },
    touchEnd(event) {
      const endTime = Date.now();
      if (endTime - this.startTime > 2000) {
        // 如果手指滑动的距离超过2s 就默认不合法
        return;
      }
      // 判断其滑动的距离是否值得触发，给定一个10 的距离
      if (Math.abs(this.endPosition - this.startPosition) > 10) {
        this.endPosition = event.changedTouches[0].clientY;
        var elePosition =
          this.endPosition - this.startPosition > 0 ? "right" : "left";
        this.gaodu = "584rpx";
      } else {
        return;
      }

      console.log(elePosition);
    },
    bofang() {
      audioContext.autoplay = true;
      audioContext.loop = true;
      audioContext.src = host + "/api/images/lang.mp3";
      audioContext.onPlay(() => {
        console.log(3);
      });
      audioContext.onEnded(() => {
        console.log(3);
      });
      audioContext.onError(() => {
        this.msg("不支持播放该音频格式");
      });
    },
    bofang2() {
      audioContextd.autoplay = true;
      audioContextd.src = host + "/api/images/ping_ok.mp3";
      audioContextd.onPlay(() => {
        console.log(3);
      });
      audioContextd.onEnded(() => {
        console.log(3);
      });
      audioContextd.onError(() => {
        this.msg("不支持播放该音频格式");
      });
    },

    fuzhi(wx) {
      uni.setClipboardData({
        data: wx,
        complete() {
          uni.showToast({
            title: "已复制到剪贴板",
          });
        },
      });
    },
    change(e) {
      console.log(e);
      //this.num=e.value+5
    },

    descInput: function (e) {
      this.zishu = e.detail.cursor;
    },
    descInput_hui: function (e) {
      this.zishu_hui = e.detail.cursor;
    },

    async info(id) {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/api/Lovepiao/peizhiindex",
        data: {},
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          this.peizhi = result.data.data;
        }
      }
    },

    async fabushang() {
      if (!this.xuanyan) {
        this.msg("纸条里是空的");
        return;
      }
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/api/Lovepiao/shagnqiangpass",
        data: {
          xuanyan: this.xuanyan,
        },
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          this.showdonghua = true;
          this.qiangshow = false;
          this.donghua();
          this.info();
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      }
    },

    async huiyinghuiqu(id) {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/api/Lovepiao/huiyinghuiqu",
        data: {
          id: id,
        },
      });

      if (result.statusCode == 200) {
        this.zhitiaoshow = false;
      }
    },
    async buynum() {
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/api/Lovepiao/buylovenum",
        data: {
          num: this.num,
        },
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          this.msg("购买成功");
          this.info();
          //this.goumaishow = false
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      }
    },

    async qiehuan(type) {
      this.bofang();
      this.huiyingbody = "";
      this.xuanyan = "";
      this.zishu = 0;
      this.zishu_hui = 0;

      if (this.peizhi.sheng_num < 1) {
        this.msg("次数用完，请充值次数");
        return;
      }
      let that = this;
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/api/Lovepiao/lovewall",
        data: {
          sex: this.sex,
          school_id: this.school_id,
          type: type,
        },
      });

      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          this.gaodu = "200rpx";
          this.info();
          this.bofang2();
          this.showdonghuadakai = true;
          this.donghuadakai();
          this.item = result.data.data;
        } else {
          this.msg("没有找到任何瓶子");
        }
      }
    },

    async wode() {
      let that = this;
      let result = await that.$request({
        loading: 1,
        method: "post",
        url: "/api/Lovepiao/mylovewall",
        data: {
          type: 1,
        },
      });
      if (result.statusCode == 200) {
        if (result.data.code == 200) {
          this.showmy = true;
          that.mylist = result.data.data.data;
        } else {
          uni.showToast({
            icon: "none",
            title: result.data.msg,
          });
        }
      } else {
        uni.showToast({
          icon: "none",
          title: that.$errorMsg,
        });
      }
    },

    donghua_moren() {
      // 1: 创建动画实例animation:
      var animation = uni.createAnimation({
        duration: 1500,
        timingFunction: "ease",
      });
      this.animation = animation;
      var next = true;
      //连续动画关键步骤
      setInterval(
        function () {
          //2: 调用动画实例方法来描述动画
          if (next) {
            animation.translateX(8).step();
            animation.rotate(19).step();
            next = !next;
          } else {
            animation.translateX(-4).step();
            animation.rotate(-19).step();
            next = !next;
          }
          //3: 将动画export导出，把动画数据传递组件animation的属性
          this.animation = animation.export();
        }.bind(this),
        300
      );
    },

    donghua() {
      var baoxiangmone = uni.createAnimation({
        duration: 1000,
        timingFunction: "ease",
      });
      this.baoxiangmone = baoxiangmone;
      baoxiangmone.rotate(-12).translate(0, -100).step({
        duration: 1000,
      });
      baoxiangmone.scale(3, 3).translate(10, 0).step();
      baoxiangmone.scale(1, 1).step({
        duration: 1000,
      });
      baoxiangmone.scale(1, 1).step({
        duration: 800,
      });
      baoxiangmone.scale(0, 0).translate(0, -100).step({
        duration: 500,
      });
      this.baoxiangmone = baoxiangmone.export();
      setTimeout(() => {
        this.msg("成功扔进信箱");
      }, 2500);
    },

    donghuadakai() {
      var baoxiangmone = uni.createAnimation({
        duration: 800,
        timingFunction: "ease",
      });
      this.baoxiangmone = baoxiangmone;
      baoxiangmone.scale(0, 0).scale(2, 2).translate(0, -100).step({
        duration: 1000,
      });
      baoxiangmone.scale(1, 1).rotate(-12).translate(0, -100).step({
        duration: 1000,
      });
      // baoxiangmone.scale(2, 2).step()
      baoxiangmone.scale(3, 3).translate(0, 0).step();
      this.baoxiangmone = baoxiangmone.export();
      setTimeout(() => {
        this.showdonghuadakai = false;
        this.zhitiaoshow = true;
      }, 2500);
    },

    huiyingpass(item) {
      let message =
        '{"data":"回应你的纸条【' +
        item.dec +
        "】," +
        this.huiyingbody +
        '","sec":"0","type":"text","toid":"' +
        item.user_id +
        '","fromid":"' +
        uni.getStorageSync("user_id") +
        '"}';
      this.save_message(message);
      this.huiyingbody = "";
      this.zishu = 0;
      this.zhitiaoshow = false;
    },

    async save_message(datassd) {
      let that = this;
      this.$socket.send(datassd);
      let result = await that.$request({
        loading: 0,
        method: "post",
        url: "/api/chat/save_message",
        data: datassd,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.numberBox {
  .reduce {
    width: 44rpx;
    height: 44rpx;
    background: rgba(216, 216, 216, 0.5);
    border-radius: 50%;
    color: #fff;
    line-height: 44rpx;
    text-align: center;
  }
  .number {
    color: #24d4d1;
    font-family: "Source Han Sans CN";
    font-size: 36rpx;
    margin: 0 36rpx;
  }
  .add {
    width: 44rpx;
    height: 44rpx;
    background: rgba(216, 216, 216, 0.5);
    border-radius: 50%;
    color: #fff;
    line-height: 44rpx;
    text-align: center;
  }
}

.bg-image {
  position: fixed;
  width: 100%;
  height: 100vh;
  top: 0;
  left: 0;
  z-index: -1;
}

.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flex-row-center {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.sex-block {
  width: 80%;
  background-color: #fff;
  border-radius: 30rpx;
  position: relative;
}

/* 文字截取*/
.clamp-text-1 {
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.clamp-text-2 {
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.title {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .home-top {
    position: relative;
    width: 70%;
    z-index: 9;
  }

  .home-top-text {
    position: absolute;
    top: 30rpx;
    z-index: 99;
    font-size: 30rpx;
    font-weight: bold;
  }
}

.box {
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  margin: 0rpx;
  perspective: 1000px;
}

.cube {
  width: 100px;
  height: 100px;
  position: relative;
  transform: rotateX(-41deg) rotateY(-63deg);
  transform-style: preserve-3d;
  animation: rotate 20s infinite linear;
}

.cube > view {
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 200px;
  font-size: 40px;
  font-weight: bold;
  color: #ffffff;
  background: rgba(206, 206, 206, 0.6);
  border: 1px solid #ffffff;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 5s ease-in;
}

.front {
  transform: translateZ(100px);
}

.back {
  transform: translateZ(-100px) rotateY(-180deg);
}

.left {
  transform: translateX(-100px) rotateY(-90deg);
}

.right {
  transform: translateX(100px) rotateY(90deg);
}

.top {
  transform: translateY(-100px) rotateX(90deg);
}

.bottom {
  transform: translateY(100px) rotateX(-90deg);
}

.cube > span {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid black;
  background-color: #666666;
  position: absolute;
  top: 50px;
  left: 50px;
}

@keyframes rotate {
  0% {
    transform: rotateX(0deg) rotateY(0deg);
  }

  100% {
    transform: rotateX(360deg) rotateY(360deg);
  }
}

.in-front {
  transform: translateZ(50px);
}

.in-back {
  transform: translateZ(-50px) rotateY(180deg);
}

.in-left {
  transform: translateX(50px) rotateY(90deg);
}

.in-right {
  transform: translateX(-50px) rotateY(-90deg);
}

.in-top {
  transform: translateY(50px) rotateX(90deg);
}

.in-bottom {
  transform: translateY(-50px) rotateX(-90deg);
}
</style>